<template>
  <el-drawer :model-value="visible" title="业主信息" :size="mobile ? '100%' : 600" append-to-body lock-scroll @close="handleClose">
    <div v-if="landlordFlag">
      <el-row align="middle">
        <el-col :span="12"><span>劲叶公寓A1123</span></el-col>
      </el-row>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabChange">
        <el-tab-pane label="业主信息" name="landlord">
          <LandlordPane></LandlordPane>
        </el-tab-pane>
        <el-tab-pane label="完成账单" name="completedBilling">
          <CompleteBillingPane></CompleteBillingPane>
        </el-tab-pane>
        <el-tab-pane label="待收账单" name="incompleteBilling">
          <IncompleteBillingPane></IncompleteBillingPane>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else>
      <el-button type="primary" @click="handleLandlord">新增业主</el-button>
    </div>
    <UtilityBills :visible="utilityBillsVisible"></UtilityBills>
    <LandlordDl
      :type="landlord.type"
      :visible="landlord.visible"
      :form="landlord.form"
      @cancel="() => landlord.visible = false"
      @ok="handleLandlordOk"
    />
  </el-drawer>
</template>
<script setup name="Landlord">
import useAppStore from '@/store/modules/app'
import LandlordPane from './landlordPane.vue'
import CompleteBillingPane from './completeBillingPane.vue'
import IncompleteBillingPane from './incompleteBillingPane.vue'
import UtilityBills from '../utilityBills.vue'
import LandlordDl from './landnlordDl.vue'

const router = useRouter()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const landlordFlag = ref(false)
const activeName = ref('landlord')
const utilityBillsVisible = ref(false)
const landlord = ref({
  type: 'add',
  visible: false,
  form: {}
})
const mobile = computed(() => useAppStore().device === 'mobile')

function handleTabChange(value) {
  
}

/* 新增业主 */
function handleLandlord() {
  landlord.value.visible = true
}
function handleLandlordOk(value) {
  console.log(value)
  landlord.value.visible = false
  landlordFlag.value = true
}

// 下来选项
function handleCommand(value) {
  switch (value) {
    case 'utilityBills':
      handleUtilityBills()
      break;
  
    default:
      break;
  }
}

// 水电记录点击弹窗
function handleUtilityBills() {
  utilityBillsVisible.value = true
}

function handlePermission() {
  emit('cancel')
  router.push({ path: '/room/permission', query: { id: 1,checkId:2 } })
}

function handleClose() {
  emit('cancel')
}
</script>
<style lang="scss" scoped>

</style>